<template>
	<view class="wp_-flex-col page">
		<!-- 轮播图 -->
		<u-swiper 
			class="banner" 
			:list="bannerList"
			:indicator="true"
			indicatorMode="line"
			:height="320"
			:autoplay="true"
			:interval="3000"
			:duration="500"
			:circular="true"
			@change="handleBannerChange" 
			@click="handleBannerClick"
		/>
		
		<!-- 会员卡片 -->
		<view class="member-card">
			<view class="member-info">
				<view class="info-content">
					<view class="user-info">
						<view class="avatar-wrap">
							<image class="avatar" :src="userInfo.avatarUrl || '/static/home/6a45ab4fd5c059dc162fe1207dbfaee4.png'" mode="aspectFill" />
							<view class="vip-badge">
								<u-icon name="star-fill" size="16" color="#fff"></u-icon>
							</view>
						</view>
						<view class="user-detail">
							<text class="name">{{userInfo.nickName || '止于江南'}}</text>
							<text class="level">黄金会员</text>
						</view>
					</view>
					<view class="asset-info">
						<view class="asset-item" @tap="handlePointsMall">
							<text class="value">{{points}}</text>
							<text class="label">积分</text>
						</view>
						<view class="divider"></view>
						<view class="asset-item" @tap="goToRecharge">
							<text class="value">{{balance}}</text>
							<text class="label">余额 (元)</text>
						</view>
					</view>
				</view>
				<view class="qr-code" @tap="handleMemberCode">
					<view class="code-wrap">
						<image class="code-icon" src="/static/home/a512d385feca0ff6c845b88dc4d2391c.png" mode="aspectFit" />
						<view class="code-light"></view>
					</view>
					<text>邀请好友</text>
				</view>
			</view>
		</view>

		<!-- 点餐方式 -->
		<view class="order-section">
			<view class="order-item" @tap="handleStoreOrder">
				<image class="order-icon" src="/static/home/178e5c56e357e488352ed51e54c13236.png" />
				<view class="order-content">
					<text class="title">堂食点餐</text>
					<text class="desc">小程序下单免排队</text>
				</view>
			</view>
			<view class="order-item" @tap="handleDeliveryOrder">
				<image class="order-icon" src="/static/home/65575697c940878bb84fc10fb09616a1.png" />
				<view class="order-content">
					<text class="title">外卖配送</text>
					<text class="desc">美味送到家</text>
				</view>
			</view>
		</view>

		<!-- 功区域 -->
		<view class="feature-section">
			<view class="feature-item" @tap="goToCoupon">
				<image class="feature-icon" src="/static/home/44e73dc8054116ccadbf2ad04798d77f.png" />
				<text>我的优惠</text>
			</view>
			<view class="feature-item" @tap="goToRecharge">
				<image class="feature-icon" src="/static/home/42b40002baa75c7f318030b8713df646.png" />
				<text>会员充值</text>
			</view>
			<view class="feature-item" @tap="handlePointsMall">
				<image class="feature-icon" src="/static/home/5f016cc82c487b0a73b3a00ad0f04192.png" />
				<text>积分商城</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			bannerList: ['/static/home/0e7f479483c27696e4d63f8ee05efa43.png'],
			userInfo: {},
			points: 366,
			balance: 128.88
		}
	},
	methods: {
		handleBannerChange(index) {
			console.log('当前轮播图索引：', index)
		},
		handleBannerClick(index) {
			console.log('点击了第' + (index + 1) + '张轮播图')
		},
		handleMemberCode() {
			uni.navigateTo({
				url: '/pages/invite/poster',
				animationType: 'slide-in-right',
				animationDuration: 300
			})
		},
		handleStoreOrder() {
			uni.switchTab({
				url: '/pages/menu/menu'
			})
		},
		handleDeliveryOrder() {
			// 保存外卖选择状态
			uni.setStorageSync('diningType', 'takeout')
			
			// 跳转到点餐页面
			uni.switchTab({
				url: '/pages/menu/menu'
			})
		},
		handleGroupBuy() {
			uni.showToast({
				title: '团购功能开发中',
				icon: 'none'
			})
		},
		
		goToRecharge() {
			uni.navigateTo({
				url: '/pages/my/recharge',
			})
		},
		handlePointsMall() {
			uni.navigateTo({
				url: '/pages/points/mall',
				animationType: 'slide-in-right',
				animationDuration: 300
			})
		},
		goToCoupon() {
			uni.navigateTo({
				url: '/pages/coupon/coupon',
			})
		}
	},
	onShow() {
		// 获取用户信息
		const userInfo = uni.getStorageSync('userInfo') || {}
		this.userInfo = userInfo
		
		// 获取积分和余额
		this.points = uni.getStorageSync('points') || 366
		this.balance = uni.getStorageSync('balance') || 128.88
	}
}
</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
	background-color: #f8f8f8;
	padding-bottom: env(safe-area-inset-bottom);
	
	.banner {
		width: 100%;
		
		/deep/ .u-swiper__wrapper {
			height: 320rpx !important;
		}
	}
	
	.member-card {
		margin: 20rpx;
		
		.member-info {
			background: #fff;
			border-radius: 20rpx;
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
			
			.info-content {
				flex: 1;
				
				.user-info {
					display: flex;
					align-items: center;
					margin-bottom: 30rpx;
					
					.avatar-wrap {
						position: relative;
						margin-right: 20rpx;
						
						.avatar {
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;
						}
						
						.vip-badge {
							position: absolute;
							right: -6rpx;
							bottom: -6rpx;
							width: 32rpx;
							height: 32rpx;
							background: #8cd548;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
					
					.user-detail {
						.name {
							font-size: 32rpx;
							color: #333;
							font-weight: bold;
							margin-bottom: 8rpx;
							display: block;
						}
						
						.level {
							font-size: 24rpx;
							color: #8cd548;
							background: rgba(140, 213, 72, 0.1);
							padding: 4rpx 12rpx;
							border-radius: 8rpx;
						}
					}
				}
				
				.asset-info {
					display: flex;
					align-items: center;
					
					.asset-item {
						flex: 1;
						text-align: center;
						
						.value {
							font-size: 36rpx;
							color: #333;
							font-weight: bold;
							display: block;
							margin-bottom: 8rpx;
						}
						
						.label {
							font-size: 24rpx;
							color: #999;
						}
					}
					
					.divider {
						width: 1rpx;
						height: 36rpx;
						background: #eee;
						margin: 0 30rpx;
					}
				}
			}
			
			.qr-code {
				padding: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				
				.code-wrap {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 8rpx;
					
					.code-icon {
						width: 100%;
						height: 100%;
					}
				}
				
				text {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}
	
	.order-section {
		margin: 30rpx 20rpx;
		display: flex;
		gap: 20rpx;
		
		.order-item {
			flex: 1;
			min-width: 0;
			background: #fff;
			border-radius: 20rpx;
			padding: 30rpx 20rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.order-icon {
				width: 100rpx;
				height: 100rpx;
				margin-bottom: 16rpx;
			}
			
			.order-content {
				width: 100%;
				text-align: center;
				display: flex;
				flex-direction: column;
				align-items: center;
				
				.title {
					font-size: 28rpx;
					color: #333;
					font-weight: bold;
					margin-bottom: 8rpx;
				}
				
				.desc {
					font-size: 24rpx;
					color: #999;
					white-space: normal;
					text-align: center;
					line-height: 1.4;
				}
			}
			
			&:active {
				transform: scale(0.98);
			}
		}
	}
	
	.feature-section {
		margin: 0 20rpx;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;
		
		.feature-item {
			background: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.feature-icon {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 12rpx;
			}
			
			text {
				font-size: 26rpx;
				color: #333;
				width: 100%;
				text-align: center;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
}

@keyframes shine {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
		transform: translate(50%, 50%) rotate(0deg);
	}
}
</style>